<template>
  <div style="height: 100%">
    <el-row>
      <el-col :span="24">
        <el-card header="充值情况">
          <div id="statisticMemberTopUp" style="height: 200px;width: 520px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Chart } from '@antv/g2'
import statisticalApi from '../../../api/statistical'
import { onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'topUpStatistical',
  components: {
    Chart
  },
  setup () {
    const store = useStore()
    let userInfo = store.getters.userInfo
    // 根据客户id查询出当前客户的消费情况
    const getStatisticMemberTopUp = () => {
      statisticalApi.statisticMemberTopUp(userInfo.id).then(res => {
        const chart = new Chart({
          container: 'statisticMemberTopUp',
          autoFit: true,
          height: 520,
        })
        chart.data(res.data)
        chart.tooltip({
          showMarkers: false,
          shared: true
        })
        chart.interval().position('name*value').color('name').adjust([
          {
            type: 'dodge',
            marginRatio: 0
          }
        ])
        chart.interaction('active-region')
        chart.render()
      })
    }
    //-------------------method end
    onMounted(() => {
      getStatisticMemberTopUp()
    })
  }
}
</script>

<style scoped>

</style>
